跳到主要内容

同行布局 SameLine

有时候你想让两个控件并排站，比如"标签 + 输入框"、"确定 + 取消按钮"。SameLine 就是干这个的——它让后续控件与当前控件保持在同一行。

一句话理解

BeginSameLine() 的意思是："下一个控件，别换行，跟我挤一挤。"

函数原型​

void BeginSameLine();
void EndSameLine();

这对函数没有参数，也没有返回值。它们只是标记一段"同行布局"的开始和结束。

使用场景​

场景一：按钮并排​

static HX::ButtonProfile bp;

if (HX::Button(HXStr("确定"), bp)) {
    // 处理确定
}
HX::BeginSameLine();
if (HX::Button(HXStr("取消"), bp)) {
    // 处理取消
}
HX::EndSameLine();

场景二：标签 + 输入框​

static HX::TextInputProfile tip;

HX::Text(HXStr("用户名:"));
HX::BeginSameLine();
HX::TextInput(tip);
HX::EndSameLine();

场景三：多个小控件并排​

HX::Button(HXStr("⏮"), bp);
HX::BeginSameLine();
HX::Button(HXStr("⏸"), bp);
HX::BeginSameLine();
HX::Button(HXStr("⏭"), bp);
HX::EndSameLine();
SameLine 的排列顺序

BeginSameLine() 影响的是它之后的那个控件。也就是说，先写一个控件 A，然后调用 BeginSameLine()，再写控件 B，B 就会和 A 排在同一行。

如果你需要三个并排，要在第二个和第三个前面都加 BeginSameLine()。

注意事项​

不支持 SameLine 的控件

Dropdown（下拉框）等部分控件不支持 SameLine 布局。如果你强行把它们放进 SameLine，可能会出现布局错乱或交互异常。

遇到这种需求时，建议改用 BeginHorizontal() / EndHorizontal()，它的兼容性和可控性更强。

与 Horizontal 的区别
  • SameLine：轻量级，适合单行的临时并排。
  • Horizontal：区域级布局，适合一整块区域内的横向排列，支持更复杂的子控件宽度分配。

如果你只是想让两个按钮挨在一起，SameLine 更省事；如果你要做一个完整的工具栏或表单行，用 Horizontal。

完整示例代码​

#include <include/hex.h>
#include <include/impl/EasyX/hex_impl_easyx.h>

int main() {
    initgraph(800, 600);
    setbkcolor(WHITE);
    cleardevice();

    HX::HXInitForEasyX();
    HX::SetBuffer(GetWorkingImage());

    BeginBatchDraw();

    static HX::WindowProfile wp;
    wp.Size = {450, 400};

    static HX::ButtonProfile bp;
    static HX::TextInputProfile tip;
    static float val = 0.5f;
    static HX::SliderProfile1f sp;

    while (true) {
        HX::HXBegin();

        ExMessage msg;
        while (peekmessage(&msg)) {
            HX::PushMessage(HX::GetHXMessage(&msg));
        }

        HX::Window(HXStr("SameLine 演示"), wp);

        // ---------- 按钮组 ----------
        HX::Text(HXStr("操作按钮:"));
        if (HX::Button(HXStr("新建"), bp)) {
            // 新建逻辑
        }
        HX::BeginSameLine();
        if (HX::Button(HXStr("打开"), bp)) {
            // 打开逻辑
        }
        HX::BeginSameLine();
        if (HX::Button(HXStr("保存"), bp)) {
            // 保存逻辑
        }
        HX::EndSameLine();

        HX::Separator();

        // ---------- 标签 + 输入框 ----------
        HX::Text(HXStr("服务器地址:"));
        HX::BeginSameLine();
        HX::TextInput(tip);
        HX::EndSameLine();

        HX::Text(HXStr("端口号:"));
        HX::BeginSameLine();
        HX::SetNextItemWidth(100);
        HX::TextInput(tip);
        HX::EndSameLine();

        HX::Separator();

        // ---------- 媒体控制按钮 ----------
        HX::Button(HXStr("⏮ 上一首"), bp);
        HX::BeginSameLine();
        HX::Button(HXStr("⏸ 暂停"), bp);
        HX::BeginSameLine();
        HX::Button(HXStr("⏭ 下一首"), bp);
        HX::EndSameLine();

        HX::End();
        HX::Render();
        FlushBatchDraw();
        Sleep(16);
    }

    closegraph();
    return 0;
}
小建议

SameLine 是写 UI 时最高频用到的布局技巧之一。记住口诀：写一个控件，调用 BeginSameLine，再写下一个。别搞反了顺序！